<template>
 <!-- 面包屑 -->
 <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ path: item.path }">
      {{item.meta.title}}
    </el-breadcrumb-item>    
  </el-breadcrumb>
  {{showroute}}
</template>

<script>
export default {
 name: '',
 components:{},
 data() {
   return {
     levelList:null
   }
 },
 watch:{
   $route(){
     this.getBreadCrumb()
   }
 },
 created() {
   this.getBreadCrumb()
 },
 computed: {
   showroute(){
     console.log('the $route is: ',this.$route)
   }
 },
 methods: {
   getBreadCrumb(){
     console.log('this breadcrumb route: ',this.$route)
     let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
     const first = matched[0]
     if(!this.isIndex(first)){
       matched = [{path:'/index',meta:{title:'首页'}}].concat(matched)
       this.levelList = matched
     }else{
       this.levelList = [{path:'/index',meta:{title:'首页'}}]
     }
     console.log('the levelist is: ',this.levelList)
   },
   isIndex(route){
     const redirect = route && route.redirect
     if(!redirect){
       return false
     }
     return redirect === '/index'
   }
 },
}
</script>
<style>
</style>